.home-page {
  height: 100%;

  > div {
    background-color: @bg-color;
    border-radius: 0.375rem;
  }

  &-defect {
    height: 13.125rem;

    &-detail {
      width: calc(100% - 3rem);
      height: 7.5rem;

      > div {
        width: calc(25% - 0.9375rem);
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .count {
          margin-top: 1.5rem;
          font-size: 1.875rem;
          color: #000;
          font-weight: bold;
        }

        .name {
          font-size: 14px;
          color: rgb(51 51 51 / 80%);
        }
      }

      .defect-day {
        background-image: url('@/assets/images/home/defect-day.png');
      }

      .defect-week {
        background-image: url('@/assets/images/home/defect-week.png');
      }

      .defect-month {
        background-image: url('@/assets/images/home/defect-month.png');
      }

      .defect-year {
        background-image: url('@/assets/images/home/defect-year.png');
      }
    }
  }

  &-charts {
    height: calc(100% - 14.625rem);

    &-total-trends {
      height: calc(100% - 22.375rem);
    }

    &-bottom {
      height: 20rem;

      > div {
        width: calc(50% - 1.25rem);

        .content-title {
          margin: 0;
        }

        .charts {
          height: calc(100% - 2rem);
        }

        .top-5 {
          > div {
            width: 100%;
            height: calc(20%);
            // background-color: aliceblue;

            .top-type {
              height: 2.5rem;
              line-height: 2.5rem;
              font-size: 0.875rem;
              color: #333;

              .din {
                font-weight: bold;
                font-size: 1.125rem;
              }
            }

            .progress {
              width: 100%;
              height: 1.375rem;
              background: #f7f8fa;
              border-radius: 0.6875rem;

              .progress-content {
                height: 100%;
                border-radius: 0.6875rem;
              }

              .top-1 {
                background: linear-gradient(90deg, #ff8f66 0%, #ff3d3d 100%);
              }

              .top-2 {
                background: linear-gradient(90deg, #ffb865 0%, #ff8853 100%);
              }

              .top-3 {
                background: linear-gradient(90deg, #56d6ad 0%, #23ad5c 100%);
              }

              .top-4 {
                background: linear-gradient(90deg, #66b8ff 0%, #337eff 100%);
              }

              .top-5 {
                background: linear-gradient(90deg, #66b8ff 0%, #337eff 100%);
              }
            }
          }
        }
      }
    }
  }
}
